<script setup name="map">
import { ref, onBeforeMount } from 'vue'
import { loadMap } from '@/utils/map'
const themeVars = {
  CellBorderColor: '#d3d3d3'
}

const list = ref([])
const loading = ref(false)
const finished = ref(false)
let AMap = {}
// 当前经纬度
const location = [120.159795, 30.271925]
const pageIndex = ref(1)
const onLoad = async () => {
  loading.value = true
  // 异步更新数据
  if (isShow.value === true && pageIndex.value > 1) {
    regeoCode(location.value[0], location.value[1])
  }
}

// 推送周边地址
const regeoCode = (...cpoint) => {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 10, // 单页显示结果条数
    pageIndex: pageIndex.value // 页码
  })
  placeSearch.searchNearBy('', cpoint, 500, function (status, result) {
    console.log(status, result)
    if (status === 'complete' && result.info === 'OK') {
      list.value = [...list.value, ...result.poiList.pois]
      pageIndex.value += 1
      loading.value = false
      if (result.poiList.pois.length < 10) {
        finished.value = true
      }
    } else {
      loading.value = false
      finished.value = true
    }
  })
}

const value = ref('')
onBeforeMount(async () => {
  AMap = await loadMap()
  const map = new AMap.Map('iMap', {
    resizeEnable: true,
    zoom: 16 // 地图显示的缩放级别});
  })

  // 显示地图层级与中心点信息
  let marker
  function logMapinfo () {
    const center = map.getCenter() // 获取当前地图中心位置
    location.value = [center.lng, center.lat]

    // 获取当前行政区
    // 中心点图标
    if (marker != null) {
      map.remove(marker)
    }
    const icon = new AMap.Icon({
      size: new AMap.Size(40, 50), // 图标尺寸
      image:
        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // Icon的图像
      imageSize: new AMap.Size(26, 40) // 根据所设置的大小拉伸或压缩图片
    })
    marker = new AMap.Marker({
      icon,
      position: center,
      offset: new AMap.Pixel(-13, -35)
    })
    marker.setMap(map)
    regeoCode(location.value[0], location.value[1])
    pageIndex.value = 1
    list.value = []
    finished.value = false
    document.documentElement.scrollTop = 0
  }
  logMapinfo()
  // 绑定地图移动与缩放事件
  map.on('moveend', logMapinfo)
  map.on('zoomend', logMapinfo)

  // 定位
  const geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位，默认:true
    timeout: 10000, // 超过10秒后停止定位，默认：5s
    position: 'LB', // 定位按钮的停靠位置
    offset: [10, 24], // 定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
    // zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
    showCircle: false,
    showMarker: true
  })
  map.addControl(geolocation)
  geolocation.getCurrentPosition(function (status, result) {
    if (status === 'complete') {
      console.log('complete', result)
    } else {
      console.log(result)
    }
  })
})
// 是否显示
const isShow = ref(true)
const search = () => {
  if (value.value === '') {
    isShow.value = true
  } else {
    isShow.value = false
  }
}
// 选中函数
const selectAddress = (e) => {
  console.log(e)
}
// 清除搜索值
const clear = () => {
  value.value = ''
  isShow.value = true
}
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <div id="search">
      <van-field
        v-model="value"
        input-align="center"
        placeholder="搜索地点"
        clearable
        clear-trigger="always"
        @update:model-value="search"
        @clear="clear"
      />
    </div>
    <div id="iMap" v-show="isShow"></div>
    <div id="list" v-show="isShow">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.id"
          :title="item.name"
          :label="item.address"
          @click="selectAddress(item)"
        />
      </van-list>
    </div>
    <div id="search-list" v-show="!isShow">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.id"
          :title="item.name"
          :label="item.address"
          @click="selectAddress(item)"
        />
      </van-list>
    </div>
  </van-config-provider>
</template>

<style lang="scss" scoped>
#search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.9vh;
  z-index: 2;
  border-top: 1px solid #d3d3d3;
  &:deep(.van-field) {
    height: 100%;
    padding: 8px 14px;
    .van-field__value {
      background: #ebebeb;
      border-radius: 4px;
      .van-field__body,
      .van-field__control {
        height: 100%;
        font-size: 16px;
        //  color: #a3a3a3;
      }
      .van-field__clear {
        margin-right: 1px;
      }
    }
  }
}
#iMap {
  position: fixed;
  top: 6.9vh;
  left: 0;
  width: 100%;
  height: 45vh;
  z-index: 2;
  border-top: 1px solid #d3d3d3;
  box-sizing: border-box;
  &:deep(.amap-copyright) {
    display: none !important;
  }
}
#list {
  margin-top: 52vh;
  width: 100%;
  height: 47.9vh;
  z-index: 1;
}
#search-list {
  margin-top: 6.9vh;
  width: 100%;
  max-height: 92.9vh;
}
</style>
